@import 'style.scss';

section.featured{
	height:665px;
	// background-image: url(../images/back/bg-slider.jpg);
	background:-webkit-linear-gradient(top, #d2e5f5, #e5e9f0); 
	background:-ms-linear-gradient(top, #d2e5f5, #e5e9f0); 
	background:-moz-linear-gradient(top, #d2e5f5, #e5e9f0); 
	background:-o-linear-gradient(top, #d2e5f5, #e5e9f0); 

	background-size: 100% 100%;
	position: relative;
	div.line{
		width: 100%;
		height: 135px;
		position: absolute;
		left: 0;
		top: 240px;
		background-color: $zhutiColor;
	}
	#featuredSweiper{
		height: 560px;
		.swiper-slide{
			overflow: hidden;
		}
		div.head{
			color: #fff;
			font-size: 40px;
			width: 740px;
			font-weight: bold;
			text-transform: uppercase;
			position: absolute;
			top: 175px;
			left: 50px;
			text-align: center;
		}
		div.imgC{
			position: absolute;
			top: 20px;
			right: 0;
			width: 360px;
			height: 480px;
			overflow: hidden;
		}
		div.shopList{
			position: absolute;
			top: 325px;
			left: 0px;
			width: 780px;
    		text-align: center;
			>a{
				display: inline-block;
				width: 202px;
				height: 170px;
				overflow: hidden;
				margin-left: 50px;
				box-shadow: 5px 5px 10px rgba(0,0,0,0.7); 
				>img{
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.swiper-pagination-bullet{
		width: 20px;
		height: 20px;
		background-color:rgba(0,0,0,0);
		border:1px solid $zhutiColor;
		opacity: 1;
	}
	.swiper-pagination-bullet-active{
		background-color: $zhutiColor;
		
	}
}

section.products{
	background-color:#f8f8f8;
	div.productsCn{
		padding: 10px 16px;
		nav.productsNav{
			width: 100%;
			height: 50px;
			background-color:#fff;
			padding:10px 60px;
			user-select:none;
			div.qieStyle{
				width: 80px;
				height: 100%;
				border-radius: 4px;
				overflow: hidden;
				float: left;
				>span{
					display: block;
					width: 50%;
					height: 100%;
					background-color:#000;
					float: left;
					line-height: 30px;
					text-align: center;
					cursor: pointer;
					>i{
						color: #fff;
						font-size: 24px;
					}
				}
				>span.active{
					background-color:#c0c0c0;
					>i{
						color: $zhutiColor;
					}
				}
			}

			div.BomList{
				float: left;
				height: 100%;
				margin-left: 20px;
				position: relative;
				div.Lone{
					float: left;
					height: 30px;;
					width: 490px;
					overflow: hidden;
					border:1px solid $zhutiColor;
					transition: all 0.5s;
					background-color:#f1f1f1;
					div.thisInd{
						width: 100%;
						height: 28px;
						color: $zhutiColor;
						position: relative;
						>input{
							border:0;
							padding-left:10px;
							width: 100%;
							height: 100%;
							font-size: 16px;
							font-weight: bold;
							text-transform: uppercase;
							color: $zhutiColor;
							padding-right:70px;
							background-color:#f1f1f1;

						}
						div.iconC{
							position: absolute;
							top: 0px;
							right: 0px;
							width: 28px;
							height: 28px;
							text-align: center;
							line-height:28px;
							color: $zhutiColor;
							font-size: 10px;
							transition: all 0.5s;
							transform: rotate(180deg);

						}
						div.active{
							transform: rotate(0deg);
						}
					}

				}
				div.Ltwo{
					float: left;
					width: 226px;
					height: 30px;
					margin-left: 15px;
					overflow: hidden;
					background-color:#f1f1f1;
					border:1px solid $zhutiColor;
					div.thisInd{
						width: 100%;
						height: 28px;
						color: #fff;
						position: relative;
						background-color: $zhutiColor;
						>input{
							border:0;
							padding-left:10px;
							width: 100%;
							height: 100%;
							font-size: 16px;
							font-weight: bold;
							text-transform: uppercase;
							color:  $zhutiColor;
							padding-right:30px;
							background-color:#f1f1f1;

						}
						div.iconC{
							position: absolute;
							top: 0px;
							right: 0px;
							width: 28px;
							height: 28px;
							text-align: center;
							line-height:28px;
							color: $zhutiColor;
							font-size: 10px;
							transition: all 0.5s;
							transform: rotate(180deg);

						}
						div.active{
							transform: rotate(0deg);
						}
					}

				}
				div.active{
					height: auto;
				}

			}
			ul.listKu{
				width: 100%;
				background-color:#f1f1f1;
				position: relative;
				z-index: 999;
				>li{
					margin-top: 5px;
					line-height: 18px;
					font-size: 14px;
					color: $zhutiColor;
					padding-left: 25px;
					text-transform: uppercase;
					position: relative;
				}
				>li:after{
					content: ' ';
					width: 5px;
					height: 5px;
					border-radius:50%;
					background-color:$zhutiColor;
					position: absolute;
					top: 6px;
					left: 12px;
					z-index: 9px;

				}
				>li:hover{
					background-color:#E5E4E2;
				}
			}
			div.Search{
				float: right;
				width: 165px;
				height: 30px;
				border-radius: 4px;
				border:1px solid $zhutiColor;
				overflow: hidden;
				position: relative;
				>input{
					border:0;
					width: 100%;
					height: 100%;
					font-size: 16px;
					padding-left: 10px;
					padding-right:30px;


				}
				div.iconC{
					position: absolute;
					top: 0;
					right: 0;
					width: 100%;
					height: 28px;
					font-size: 16px;
					color: $zhutiColor;
					text-transform: uppercase;
					line-height: 28px;
					text-align: center;
					cursor: pointer;
				}
			}
		}
	}

	ul.styleOne{
		width: 100%;
		padding:0 60px;
		>li{
			transition:all 1s;

			width: 215px;
			height: 295px;
			margin-top: 40px;
			float: left;
			margin-right: 48px;
			>a{
				display: block;
				width: 100%;
				padding-bottom: 10px;
				div.imgC{
					transition:all 1s;

					width: 100%;
					height: 215px;
					overflow: hidden;
					img{
						max-width: 100%;
					}
				}
				div.title{
					margin-top: 10px;
					line-height:30px;
					font-size: 14px;
					text-transform: uppercase;
					font-weight: bold;

					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;



				}
				div.author,
				p{
					display: none;
				}
			}
		}

		>li:nth-child(4n){
			margin-right: 0px;
		}
	}

	ul.styleTwo{
		width: 100%;
		padding:0 60px;
		>li{
			margin-top: 40px;
			>a{
				display: block;
				width: 100%;
				div.imgC{
					width: 195px;
					height: 195px;
					overflow: hidden;
					float: left;
					img{
						max-width: 100%;
					}
				}
				div.rig{
					float: right;
					width: 790px;
				}
				div.title{
					line-height:30px;
					font-size: 20px;
					text-transform: uppercase;
					font-weight: bold;

				}
				div.author{
					font-size: 18px;
				}
				p{
					margin-top: 4px;
					line-height: 32px;
				}
			}
		}

	}

}


section.sellres{
	div.SweiperBom{
		margin:30px auto;
		width: 1000px;
		height: 415px;
	}

	.swiper-button-prev{
		width: 61px;
		height: 130px;
		background-image: url(../images/but/products_l.png);
		background-size:100% 100%;
	}
	.swiper-button-next{
		width: 61px;
		height: 130px;
		background-image: url(../images/but/products_r.png);
		background-size:100% 100%;
	}
	// .swiper-button-prev:hover,.swiper-button-next:hover{
	// 	background-color:rgba(0,0,0,0.1);
	// }
	div.slideNei{
		width: 320px;
		padding:15px;
		background-color: #e7e7e7;
		>a{
			display: block;
			width: 100%;
			div.imgC{
				width: 100%;
				height: 294px;
				overflow: hidden;
				img{
					max-width: 100%;

				}
			}
			div.word{
				margin-top: 15px;
				background-color: #fff;
				min-height: 80px;
				padding: 0 5px;
				h4{
					text-transform:uppercase;
					color: #333;
					font-size: 16px;
					line-height: 34px;

				}
			}
		}
	}
}